<template>
  <div>

    <!-- 定义二级路由的坑 -->
<router-view v-if='$route.path == "/home/search"'></router-view>

  <div v-else>
      <!-- 首页搜索框 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="$router.push('/home/search')"/>
    <!-- 首页轮播图 -->
    <Swiper :bannerArr="bannerArr"></Swiper>
    <!-- 图片导航 -->
    <Grid :channelArr="channelArr"></Grid>
    <!-- 品牌制造商直供 -->
    <Brand :brandArr="brandArr"></Brand>
    <!-- 新品首发  -->
    <newGoods :newGoodsArr="newGoodsArr"></newGoods>
    <!-- 人气推荐 -->
    <HotGoods :hotGoodsArr="hotGoodsArr"></HotGoods>
    <!-- 专题精选 -->
    <TopicList :topicListArr='topicListArr'></TopicList>
    <!-- 分类组件 -->
   <div v-for='item in categoryListArr' :key='item.id'>
     
      <Categorys  :goodsList='item.goodsList' :title="item.name">
         
       
      </Categorys>
   </div>
  </div>
  </div>
</template>
<script>
// 引入首页轮播图组件
import Swiper from "@/components/Swiper.vue";
// 引入图片导航组件
import Grid from "@/components/Grid.vue";
// 品牌制造商直供组件
import Brand from "@/components/Brand.vue";
// 新品首发 组件
import NewGoods from "@/components/NewGoods.vue";
// 人气推荐  组件
import HotGoods from "@/components/HotGoods.vue";
// 专题精选 组件
import TopicList from "@/components/TopicList.vue";
// 分类组件
import Categorys from "@/components/Categorys.vue"

// 导入首页数据请求
import { getIndexData } from "@/utils/http.js";


// console.log(getIndexData);

export default {
  name: "Home",
  props: [""],
  data() {
    return {
      value: "", //搜索的关键字
      bannerArr: [], //轮播图数据
      channelArr: [], //图片导航数据
      brandArr: [], //品牌制造商直供组件数据
      newGoodsArr: [], //新品首发组件数据
      hotGoodsArr: [], //人气推荐组件数据
      topicListArr:[],//专题精选 组件数据
      categoryListArr:[],//分类数据
    
    };
  },
  // 注册组件
  components: {
    Swiper,
    Grid,
    Brand,
    NewGoods,
    HotGoods,
    TopicList,
    Categorys,
  },
  methods: {
    clickFn(){
     
    }
  },
  created() {
    getIndexData().then((res) => {
      // console.log(res);
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandArr = res.data.data.brandList;
      this.newGoodsArr = res.data.data.newGoodsList;
      this.hotGoodsArr = res.data.data.hotGoodsList;
      this.topicListArr = res.data.data.topicList;
      this.categoryListArr = res.data.data.categoryList;
      
      
    });
  },
  mounted() {},
  updated() {},
};
</script>
<style scoped lang='less'>
 
</style>